<!--
    随机头像API

-->
<template>
  <div class="container">

    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
        <li class="breadcrumb-item active" aria-current="page">随机头像</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary ">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header bg-info">随机头像</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">随机生成一张头像，快快保存吧~</h5>
        <p class="card-text"></p>
        <button type="button" @click="getImage" class="btn btn-outline-success">点击生成头像</button>


        <!--  旋转提示组件  -->
        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>

<!--    <div class="text-center">-->
<!--      <img class="my-image mt-3 img-thumbnail w-50" v-bind:src="imageURL">-->
<!--    </div>-->

    <!--  存放第2个 3D img 标签 -->
    <div class="photo_04">
      <ul>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
        <li><img v-bind:src="imageURL" alt=""></li>
      </ul>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'RandomHeadPortrait',
    data() {
      return {
        imageURL: "",
        /*  头像类别： “男”，“女”，“动漫男”，“动漫女”  */
        sort: "动漫男"
      }
    },
    methods: {
      async getImage() {
        this.$(".spinner-border").css("display", "inline-block");

        const result = await this.$http.get("https://api.uomg.com/api/rand.avatar", {
          params: {
            sort: this.sort,
            format: "json"
          }
        });
        console.log(result);
        this.imageURL = result.data.imgurl;

        if (this.imageURL !== "") {
          this.$(".spinner-border").css("display", "none");
          this.$(".photo_04").css("display", "block");

        }
      }
    }
  }
</script>

<style scoped>
  .spinner-border {
    display: none;
  }

  /*  点击随机头像按钮，发送请求之后再显示出来  */
  .photo_04 {
    display: none;
  }

  /*照片墙：4（3D照片墙）*/
  .photo_04{
    /*width: 1288px;*/
    /*height: 660px;*/
    /*background-color: red;*/
    background: url("../../../../public/image/timg_02.jpg") no-repeat;
    background-size: 1288px 660px;
    padding-top: 125px;
    padding-bottom: 125px;
    /*padding-left: 500px;*/
  }

  /*    设置3D 效果，使用 transform-style 属性  */
  .photo_04 ul{
    width: 300px;
    height: 400px;
    margin: 0px auto;
    /*给ul添加背景颜色，便于观察*/
    background-color: orange;
    /*margin: 100px auto;*/
    position: relative;
    /*给ul设置3D效果*/
    transform-style: preserve-3d;
    /*transform: rotateX(-30deg);*/
    /*给ul添加动画*/
    animation: move 6s linear 0s infinite normal;
  }

  .photo_04 ul li{
    width: 300px;
    height: 400px;
    list-style: none;
    position: absolute;
    top: 0px;
    left: 0px;
  }


  /*
      同样是先旋转再平移，这里是绕 Y 轴进行旋转。
      然后平移，形成一个圆柱形的 3D 效果

  */

  .photo_04 ul li:nth-child(1){
    transform: rotateY(60deg) translateZ(300px);
  }
  .photo_04 ul li:nth-child(2){
    transform: rotateY(120deg) translateZ(300px);
  }
  .photo_04 ul li:nth-child(3){
    transform: rotateY(180deg) translateZ(300px);
  }
  .photo_04 ul li:nth-child(4){
    transform: rotateY(240deg) translateZ(300px);
  }
  .photo_04 ul li:nth-child(5){
    transform: rotateY(300deg) translateZ(300px);
  }
  .photo_04 ul li:nth-child(6){
    transform: rotateY(360deg) translateZ(300px);
  }
  .photo_04 ul li img{
    width: 300px;
    height: 400px;
    border: 3px dashed #cccccc;
  }
  .photo_04 ul:hover{
    animation-play-state: paused;
  }

  /*    这里直接绕 Y 轴旋转即可   */
  @keyframes move {
    from{
      /*固定不变的写在前面*/
      transform: rotateX(-10deg) rotateY(0deg);
    }
    to{
      transform: rotateX(-10deg) rotateY(360deg);
    }
  }
  /* --------------------------- 第2个3D照片墙结束 -----------------------------*/

</style>
